<template>
  <div class="download">
    <banner img="../assets/img/appDown.jpg" title="联系我们" />
    <div class="contentBox">
      <!-- <div class="menuBox">
        <div
          v-on:click="changeMenu(item)"
          :class="{
            menuItemed: subMenuId === item.id,
            menuItem: subMenuId != item.id
          }"
          v-for="(item, index) of menuList"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div> -->
      <div class="menuContent" v-loading="loading">
        <div
          class="menuContentItem"
          v-for="(item, index) of contentList"
          :key="index"
          v-html="item.content"
        ></div>
        <!-- <div class="line"></div> -->
        <el-pagination
          style="float: right; margin-top: 20px"
          :page-size="10"
          layout="total, pager, next, jumper"
          :current-page="query.pageNo + 1"
          :total="query.total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Banner from '../components/Banner'
export default {
  components: {
    Banner
  },
  // computed: {
  //   menuClicked(item) {
  //     return this.
  //   }
  // },
  data() {
    return {
      loading: true,
      webImageList: [],
      solution: [],
      bannerHeight: '',
      menuList: [],
      contentList: [],
      query: {
        pageNo: 0,
        pageSize: 10,
        total: 0
      },
      subMenuId: ''
    }
  },
  // http://www.utopia9527.com:8019/companyWeb/subMenu/list?menuId=4

  created() {
    this.getContentList()
    // this.$http.get('/companyWeb/content/listConsumer?').then((responseCases) => {
    //   this.menuList = responseCases.data.obj.data
    //   if (this.menuList.length > 0) {
    //     this.subMenuId = this.menuList[0].id
    //   }
    // })
  },
  methods: {
    getContentList() {
      this.$http
        .get(
          `/companyWeb/content/listConsumer?pageNo=${this.query.pageNo}&pageSize=${this.query.pageSize}&subMenuId=0&menuId=5`
        )
        .then((res) => {
          this.loading = false
          console.log(res.data.obj.data)
          this.contentList = res.data.obj.data
          this.query.total = res.data.obj.count
        })
    },
    changeMenu(item) {
      this.loading = !this.loading
      this.subMenuId = item.id
      this.getContentList()
    },
    handleCurrentChange(val) {
      this.query.pageNo = val - 1
      this.getContentList()
    }

    // goPage(item) {
    //   this.path = item
    //   this.$router.push(item)
    // }
  }
}
</script>

<style lang="scss" scoped>
.line {
  margin-top: 80px;
  width: 100%;
  height: 2px;
  background: #cdcdcd;
}
.download {
  width: 100%;
}
.menuContentItem {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #333;
  border-radius: 5px;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
}
.contentBox {
  width: 100%;
  padding: 0 80px;
  box-sizing: border-box;
  margin-top: 40px;
  margin-bottom: 180px;
  display: flex;
  align-items: flex-start;
  a {
    text-decoration: none;
    color: #333;
  }
  .menuItemed {
    width: 220px;
    height: 48px;
    font-size: 17px;
    font-weight: 700;
    line-height: 48px;
    text-align: center;
    background: #f0f0f0;
    box-shadow: 0 2px 12px 0 #d1cece;
    background: #218fd1;
    color: #fff;
    cursor: pointer;
  }
  .menuItem {
    cursor: pointer;
    width: 220px;
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    text-align: center;
    background: #fff;
    box-shadow: 0 2px 12px 0 #d1cece;
  }
  .menuContent {
    width: 100%;
    margin-left: 80px;
    padding-right: 80px;
  }
}
</style>